<template>
  <!--  1.查看商品信息2.查看投诉图片3.查看客户信息（收货人，发货人）  -->
  <!-- 1.退款2.在线联系客户 -->
  <!-- 客户方面，1.确认已解决2.撤销投诉3.评价 -->
  <div>
    <el-row style="height: 200px">
      <el-col :span="22" :offset="1">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="订单信息" name="second">
            <el-descriptions title="">
              <el-descriptions-item label="寄件人">{{ orderContract.senderName }}</el-descriptions-item>
              <el-descriptions-item label="寄件人电话">{{ orderContract.senderPhone }}</el-descriptions-item>
              <el-descriptions-item label="寄件人地址">{{ wayBill.senderAddr }}</el-descriptions-item>
              <el-descriptions-item label="收件人">{{ orderContract.receiverName }}</el-descriptions-item>
              <el-descriptions-item label="收件人电话">{{ orderContract.receiverPhone }}</el-descriptions-item>
              <el-descriptions-item label="收件人地址">{{ wayBill.receiverAddr }}</el-descriptions-item>
              <el-descriptions-item label="备注信息">{{ orderContract.remarks }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="运单信息" name="third">
            <el-descriptions title="">
              <el-descriptions-item label="预计发货时间">{{ parseTime(wayBill.deliveryTime) }}</el-descriptions-item>
              <el-descriptions-item label="预计到货时间">{{ parseTime(wayBill.estimatedArriveTime) }}</el-descriptions-item>
              <el-descriptions-item label="是否包含易碎品">
                <dict-tag :options="dict.type.accept_contains_fragile_goods_yes_no"
                          :value="this.wayBill.containsFragileGoods"/>
              </el-descriptions-item>
              <el-descriptions-item label="代收货款">
                <dict-tag :options="dict.type.accept_collect_payment_yes_no"
                          :value="this.wayBill.isNeedCollectPayment"/>
              </el-descriptions-item>
              <el-descriptions-item label="返款类型"
                                    v-if="this.wayBill.refundType!=1">
                <dict-tag :options="dict.type.accept_refund_type"
                          :value="this.wayBill.refundType"/>
              </el-descriptions-item>
              <el-descriptions-item label="返款" v-if="this.wayBill.payment!=undefined">{{ wayBill.payment }}
              </el-descriptions-item>
              <el-descriptions-item label="支付方式">
                <dict-tag :options="dict.type.accept_pay_type"
                          :value="this.wayBill.payType"/>
              </el-descriptions-item>
              <el-descriptions-item label="运费">{{ this.contract.money }}</el-descriptions-item>
              <el-descriptions-item label="货物重量">{{ this.wayBill.goodsWeight }}</el-descriptions-item>
              <el-descriptions-item label="货物体积">{{ this.wayBill.goodsVolume }}</el-descriptions-item>
              <el-descriptions-item label="货物价值">{{ this.wayBill.goodsValue }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="货运单信息" name="fourth">
            <el-descriptions title="">
              <el-descriptions-item label="里程">{{ contract.distance }}</el-descriptions-item>
              <el-descriptions-item label="保险费">{{ contract.insurance }}</el-descriptions-item>
              <el-descriptions-item label="运输状态">
                <dict-tag :options="dict.type.accept_waybill_status"
                          :value="this.contract.status"/>
              </el-descriptions-item>
              <el-descriptions-item label="司机姓名">{{ driver.name }}</el-descriptions-item>
              <el-descriptions-item label="司机电话">{{ driver.phone }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="投诉信息" name="fifth">
            <el-descriptions title="">
              <el-descriptions-item label="投诉内容">{{ complaint.context }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <div v-if="this.complaint.status==0||this.complaint.status==3" style="font-size: 25px">请等待客服处理。。。</div>
    <div v-if="this.complaint.status==1||this.complaint.status==4">
      <el-button
      type="success"
      @click="endComplaint"
      >投诉已解决</el-button>
    </div>
  </div>
</template>

<script>
import {getStatics, ignoreComplaint, changeStatus2, rollbackComplaint} from "@/api/system/complaint";

export default {
  name: "ComplaintStatics",
  dicts: ['sys_user_sex', 'accept_contains_fragile_goods_yes_no',
    'accept_collect_payment_yes_no', 'accept_refund_type',
    'accept_pay_type', 'accept_waybill_status'],
  created() {
    this.orderNumber = this.$route.query.orderNumber;
    //如果没有id返回上一页
    if (this.orderNumber == undefined) {
      this.$alert('请选择订单', {
        confirmButtonText: '确定',
        callback: action => {
          this.$router.push('customerComplaint')
        }
      });
    }
    //根据id获取信息
    else {
      getStatics(this.orderNumber).then(res => {
        console.log(res)
        this.complaint = res.data.complaint;
        this.contract = res.data.contract;
        this.orderContract = res.data.orderContract;
        this.wayBill = res.data.wayBill;
        this.user = res.data.user;
        this.driver = res.data.driver;

      });
    }
  },
  data() {
    return {
      orderNumber: undefined,
      activeName: 'second',
      user: {
        userName: undefined,
        sex: undefined,
        nickName: undefined,
        email: undefined,
        phonenumber: undefined,
      },
      orderContract: {
        senderName: undefined,
        senderPhone: undefined,
        senderAddr: undefined,
        receiverName: undefined,
        receiverPhone: undefined,
        goodsWeight: undefined,
        goodsValue: undefined,
        goodsVolume: undefined,
      },
      wayBill: {},
      contract: {},
      driver: {},
      complaint: {},
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleDelete() {
      const roleIds = this.complaint.id;
      this.$modal.confirm('是无视编号为"' + roleIds + '"的投诉？').then(function () {
        return ignoreComplaint(roleIds);
      }).then(() => {
        this.$modal.msgSuccess("无视成功");
        this.$router.push('customerComplaint')
      }).catch(() => {
      });
    },
    handleRefund(status) {
      changeStatus(status, this.$store.getters.name, this.complaint.id);
      this.$router.push('customerComplaint')
    },
    rollback() {
      const roleIds = this.complaint.id;
      this.$modal.confirm('是继续处理编号为"' + roleIds + '"的投诉？').then(function () {
        return rollbackComplaint(roleIds);
      }).then(() => {
        this.$modal.msgSuccess("还原成功");
        this.$router.push('customerComplaint')
      }).catch(() => {
      });
    },
    endComplaint(){
      changeStatus2(this.$store.getters.name, this.complaint.id);
      this.$router.push('customerComplaint')
    },
  }
}
</script>

<style scoped>

</style>
